<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style type="text/css">
			table {
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="container-fluid">
			<form>
				<div class="form-group">
					<label>名称</label>
					<input type="text" class="form-control" v-model="name" placeholder="名称">
				</div>
				<div class="form-group">
					<label>价格</label>
					<input type="text" class="form-control" v-model="price" placeholder="价格">
				</div>
				<button type="submit" class="btn btn-default" @click.prevent="save">保存</button>
				<button type="submit" class="btn btn-success" @click.prevent="query">查询</button>
			</form>
			<clist :cs="cs" @dd="del"></clist>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="js/CourseComponent.js"></script>
		<script type="text/javascript">
			
			const vm = new Vue({
				el: '#app',
				computed: {
					cs() {
						return this.course;
					}
				},
				mounted() {
					let courseStr = localStorage.getItem("course");
					const courseObj = JSON.parse(courseStr);
					this.course = courseObj;
				},
				data: {
					name: '',
					price: 0,
					course: []
				},
				methods: {
					save() {
						let c = {
							id: Math.ceil(Math.random() * 10000),
							name: this.name,
							price: this.price
						}
						this.course.unshift(c);
					},
					del(id, index) {
						this.course.splice(index, 1);
					},
					query() {
						const arr = this.course.filter(val => {
							return val.name.includes(this.name)
						});
						this.course = arr;
					}
				},
			})
			console.log(vm);
		</script>
	</body>
</html>
